<template>
    <div class="setup">
        <van-nav-bar title="个人中心" left-arrow @click-left='goback()' class="header">
        </van-nav-bar>
        <!-- 绑定用户名 -->
        <van-cell is-link @click="goNickName">绑定用户名</van-cell>
        <van-popup v-model="show1" class="active">
            <h4>设置用户名</h4>
            <van-form>
                <van-field v-model="usernickname" name="用户名" placeholder="请输入用户名" :rules="[{ required: true}]" />
                <div style="margin: 16px;">
                    <van-button round block type="info" native-type="submit" style="backgroundColor:red;" @click="changeName">更新</van-button>
                </div>
            </van-form>
        </van-popup>
        <!-- 修改密码-->
        <van-cell is-link @click="goNewPass">修改密码</van-cell>
        <van-popup v-model="show2"  class="active">
            <h4>设置新密码</h4>
            <van-form>
                <van-field v-model="oldpassword" type="password" name="用户名" placeholder="请输入旧密码" :rules="[{ required: true}]" />
                <van-field v-model="newpassword" type="password" name="用户名" placeholder="请输入新密码" :rules="[{ required: true}]" />
                <div style="margin: 16px;">
                    <van-button round block type="info" native-type="submit" style="backgroundColor:red;" @click="changePass()">更新</van-button>
                </div>
            </van-form>
        </van-popup>
        <van-button round block type="info" native-type="submit" style="backgroundColor:red;" @click="backLogin()">退出登录</van-button>
    </div>

</template>

<script>
export default {
    data() {
        return {
            usernickname: '',
            oldpassword:'',
            newpassword: '',
            show1: false,
            show2: false
        }
    },
    methods: {
        goNickName() {
            this.show1 = true;
        },
        goNewPass() {
            this.show2 = true;
        },
        goback() {
            this.$router.back()
        },
        // 绑定用户名
        changeName() {
            this.$service({
                method:'get',
                url:'user/info',
                headers:{
                    token:localStorage.getItem('token')
                },
                params:{
                   userid:localStorage.getItem('userid')
                }
            })
            .then(res=>{
                if(res.data.code==200){
                    this.$toast('设置成功')
                    localStorage.setItem('usernickname',this.usernickname)
                }
            })
        },
        // 修改密码
        changePass() { 
            console.log('this.oldpassword',this.oldpassword);
            this.$service({
                method:'get',
                url:'user/updatePassword',
                headers:{
                    token:localStorage.getItem('token')
                },
                params:{
                    userid:localStorage.getItem('userid'),
                    oldpassword:this.oldpassword,
                   newpassword:this.newpassword
                }
            })
            .then(res=>{
                console.log("res",res);
                if(res.data.code==200){
                    this.$toast('密码修改成功')
                }
            })
        },
        // 退出登录
        backLogin(){
            localStorage.removeItem('token')
            this.$router.push('login')
        }
    },

}
</script>

<style scoped>
.setup{
    position: relative;
}
.username,
.userpass {
    display: block;
    height: 3.25rem;
    line-height: 3.25rem;
    padding: 0 .625rem;
    display: flex;
    justify-content: space-between;
}
h4{
    margin: .625rem 0;
}
.active{
    text-align: center;
    border-radius: .625rem;
    height: 13.625rem;
    top:250px;
}
</style>>

</style>